<template>
  <div class="mod-config">
    <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
      <el-form-item>
        <el-input v-model="dataForm.key" placeholder="设备名称" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="getDataList()">查询</el-button>
        <el-button v-if="isAuth('interset:interset:save')" @click="addOrUpdateHandle()">新增</el-button>
        <el-button v-if="isAuth('interset:interset:delete')" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">批量删除</el-button>
        <el-button @click="submit" :disabled="disabled">导出</el-button>
      </el-form-item>
    </el-form>
    <el-table
      :data="dataList"
      border
      ref="singleTable"
      highlight-current-row
      @current-change="handleCurrentChange"
      :row-class-name="tableRowClassName"
      :header-cell-style="{background:'#17b3a3',color:'#FFFFFF'}"
      v-loading="dataListLoading"
      @selection-change="selectionChangeHandle"
      style="width: 100%;">
      <el-table-column
        type="selection"
        header-align="center"
        align="center"
        width="50">
      </el-table-column>
      <el-table-column
        prop="deviceId"
        header-align="center"
        align="center"
        label="设备编号">
      </el-table-column>
      <el-table-column
        prop="deviceName"
        header-align="center"
        align="center"
        label="设备名称">
      </el-table-column>
      <el-table-column
        prop="deviceType"
        header-align="center"
        align="center"
        label="设备类型">
      </el-table-column>
      <el-table-column
        prop="deviceProfileName"
        header-align="center"
        align="center"
        label="设备配置">
      </el-table-column>
      <el-table-column
        prop="deviceProtocol"
        header-align="center"
        align="center"
        label="协议类型">
      </el-table-column>
      <el-table-column
        prop="createdTime"
        header-align="center"
        align="center"
        label="创建时间">
      </el-table-column>
      <el-table-column
        fixed="right"
        header-align="center"
        align="center"
        width="150"
        label="操作">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.deviceId)">修改</el-button>
          <el-button type="text" size="small" @click="deleteHandle(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="pageIndex"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pageSize"
      :total="totalPage"
      layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>
    <!-- 弹窗, 新增 / 修改 -->
    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
  </div>
</template>

<script>
import AddOrUpdate from './interset-add-or-update'
import {Loading} from 'element-ui'
import xlsx from 'xlsx'
export default {
  data () {
    return {
      dataForm: {
        key: ''
      },
      disabled: false,
      loading: false,
      dataList: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataListLoading: false,
      dataListSelections: [],
      addOrUpdateVisible: false
    }
  },
  components: {
    AddOrUpdate
  },
  activated () {
    this.getDataList()
  },
  methods: {
    // 导出操作
    submit(){
      if(this.dataListSelections.length <= 0){
        this.$message({
          message: "请选择需要导出的数据!",
          type: 'warning',
          showClose: true
        });
        return;
      }
      this.disabled = true;
      let loadingInstance = Loading.service({
        text: "正在导出...",
        background: "rgba(0,0,0,.5)"
      });
      let arr = this.dataListSelections.map(item => {
        console.log(item)
        return {
          设备编号: item.equipmentid,
          设备名称: item.equipmentname,
          品牌: item.eqbrand,
          设备类型: item.type,
          用途: item.usedfor,
          接口类型: item.interfacetype,
          协议类型: item.protocol,
          MAC地址: item.eqaddress
        };
      });
      //console.log(arr)
      let sheet = xlsx.utils.json_to_sheet(arr);
      const book1 = xlsx.utils.book_new();
      xlsx.utils.book_append_sheet(book1,sheet,"sheet1");
      xlsx.writeFile(book1,`user${new Date().getTime()}.xls`);
      loadingInstance.close();
      this.disabled = false;
    },
    //  奇偶行背景色不同
    setCurrent(row) {
      this.$refs.singleTable.setCurrentRow(row);
    },
    handleCurrentChange(val) {
      this.currentRow = val;
    },
    tableRowClassName({row, rowIndex}) {
      if ((rowIndex + 1) % 2 === 0) {
        return 'success-row';
      }
      return '';
    },
    // 获取数据列表
    getDataList () {
      this.dataListLoading = true
      this.$http({
        url: this.$http.adornUrl('/cuttingcur/cuttingmachinecurdata/listCuttinginfo'),
        method: 'get',
        params: this.$http.adornParams({
          'page': this.pageIndex,
          'limit': this.pageSize,
          'key': this.dataForm.key
        })
      }).then(({data}) => {
        if (data) {
          this.dataList = data
          // this.totalPage = data.page.totalCount
        } else {
          this.dataList = []
          this.totalPage = 0
        }
        this.dataListLoading = false
      })
    },
    // 每页数
    sizeChangeHandle (val) {
      this.pageSize = val
      this.pageIndex = 1
      this.getDataList()
    },
    // 当前页
    currentChangeHandle (val) {
      this.pageIndex = val
      this.getDataList()
    },
    // 多选
    selectionChangeHandle (val) {
      this.dataListSelections = val
    },
    // 新增 / 修改
    addOrUpdateHandle (id) {
      this.addOrUpdateVisible = true
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init(id)
      })
    },
    // 删除
    deleteHandle (id) {
      var ids = id ? [id] : this.dataListSelections.map(item => {
        return item.no
      })
      this.$confirm(`确定对[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http({
          url: this.$http.adornUrl('/interset/interset/delete'),
          method: 'post',
          data: this.$http.adornData(ids, false)
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.$message({
              message: '操作成功',
              type: 'success',
              duration: 1500,
              onClose: () => {
                this.getDataList()
              }
            })
          } else {
            this.$message.error(data.msg)
          }
        })
      })
    }
  }
}
</script>
<style lang="scss">
.tr-color-0 {
  background: #f0f0f0;
}
.tr-color-1 {
  background: #fff;
}
.el-table .success-row {
  background: #DFEAF5;
}
</style>

<!--<template>-->
<!--  <div class="mod-config">-->
<!--    <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">-->
<!--      <el-form-item>-->
<!--        <el-input v-model="dataForm.key" placeholder="设备名称" clearable></el-input>-->
<!--      </el-form-item>-->
<!--      <el-form-item>-->
<!--        <el-button @click="getDataList()">查询</el-button>-->
<!--        <el-button v-if="isAuth('interset:interset:save')" @click="addOrUpdateHandle()">新增</el-button>-->
<!--        <el-button v-if="isAuth('interset:interset:delete')" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">批量删除</el-button>-->
<!--        <el-button @click="submit" :disabled="disabled">导出</el-button>-->
<!--      </el-form-item>-->
<!--    </el-form>-->
<!--    <el-table-->
<!--      :data="dataList"-->
<!--      border-->
<!--      ref="singleTable"-->
<!--      highlight-current-row-->
<!--      @current-change="handleCurrentChange"-->
<!--      :row-class-name="tableRowClassName"-->
<!--      :header-cell-style="{background:'#17b3a3',color:'#FFFFFF'}"-->
<!--      v-loading="dataListLoading"-->
<!--      @selection-change="selectionChangeHandle"-->
<!--      style="width: 100%;">-->
<!--      <el-table-column-->
<!--        type="selection"-->
<!--        header-align="center"-->
<!--        align="center"-->
<!--        width="50">-->
<!--      </el-table-column>-->
<!--&lt;!&ndash;      <el-table-column&ndash;&gt;-->
<!--&lt;!&ndash;        prop="no"&ndash;&gt;-->
<!--&lt;!&ndash;        header-align="center"&ndash;&gt;-->
<!--&lt;!&ndash;        align="center"&ndash;&gt;-->
<!--&lt;!&ndash;        label="No">&ndash;&gt;-->
<!--&lt;!&ndash;      </el-table-column>&ndash;&gt;-->
<!--      <el-table-column-->
<!--        prop="equipmentid"-->
<!--        header-align="center"-->
<!--        align="center"-->
<!--        label="设备编号">-->
<!--      </el-table-column>-->
<!--      <el-table-column-->
<!--        prop="equipmentname"-->
<!--        header-align="center"-->
<!--        align="center"-->
<!--        label="设备名称">-->
<!--      </el-table-column>-->
<!--      <el-table-column-->
<!--        prop="eqbrand"-->
<!--        header-align="center"-->
<!--        align="center"-->
<!--        label="品牌">-->
<!--      </el-table-column>-->
<!--      <el-table-column-->
<!--        prop="type"-->
<!--        header-align="center"-->
<!--        align="center"-->
<!--        label="设备类型">-->
<!--      </el-table-column>-->
<!--      <el-table-column-->
<!--        prop="usedfor"-->
<!--        header-align="center"-->
<!--        align="center"-->
<!--        label="用途">-->
<!--      </el-table-column>-->
<!--      <el-table-column-->
<!--        prop="interfacetype"-->
<!--        header-align="center"-->
<!--        align="center"-->
<!--        label="接口类型">-->
<!--      </el-table-column>-->
<!--      <el-table-column-->
<!--        prop="protocol"-->
<!--        header-align="center"-->
<!--        align="center"-->
<!--        label="协议类型">-->
<!--      </el-table-column>-->
<!--      <el-table-column-->
<!--        prop="eqaddress"-->
<!--        header-align="center"-->
<!--        align="center"-->
<!--        label="MAC地址">-->
<!--      </el-table-column>-->
<!--      <el-table-column-->
<!--        fixed="right"-->
<!--        header-align="center"-->
<!--        align="center"-->
<!--        width="150"-->
<!--        label="操作">-->
<!--        <template slot-scope="scope">-->
<!--          <el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.no)">修改</el-button>-->
<!--          <el-button type="text" size="small" @click="deleteHandle(scope.row.no)">删除</el-button>-->
<!--        </template>-->
<!--      </el-table-column>-->
<!--    </el-table>-->
<!--    <el-pagination-->
<!--      @size-change="sizeChangeHandle"-->
<!--      @current-change="currentChangeHandle"-->
<!--      :current-page="pageIndex"-->
<!--      :page-sizes="[10, 20, 50, 100]"-->
<!--      :page-size="pageSize"-->
<!--      :total="totalPage"-->
<!--      layout="total, sizes, prev, pager, next, jumper">-->
<!--    </el-pagination>-->
<!--    &lt;!&ndash; 弹窗, 新增 / 修改 &ndash;&gt;-->
<!--    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>-->
<!--  </div>-->
<!--</template>-->

<!--<script>-->
<!--  import AddOrUpdate from './interset-add-or-update'-->
<!--  import {Loading} from 'element-ui'-->
<!--  import xlsx from '_xlsx@0.16.0@xlsx'-->
<!--  export default {-->
<!--    data () {-->
<!--      return {-->
<!--        dataForm: {-->
<!--          key: ''-->
<!--        },-->
<!--        disabled: false,-->
<!--        loading: false,-->
<!--        dataList: [],-->
<!--        pageIndex: 1,-->
<!--        pageSize: 10,-->
<!--        totalPage: 0,-->
<!--        dataListLoading: false,-->
<!--        dataListSelections: [],-->
<!--        addOrUpdateVisible: false-->
<!--      }-->
<!--    },-->
<!--    components: {-->
<!--      AddOrUpdate-->
<!--    },-->
<!--    activated () {-->
<!--      this.getDataList()-->
<!--    },-->
<!--    methods: {-->
<!--      // 导出操作-->
<!--      submit(){-->
<!--        if(this.dataListSelections.length <= 0){-->
<!--          this.$message({-->
<!--            message: "请选择需要导出的数据!",-->
<!--            type: 'warning',-->
<!--            showClose: true-->
<!--          });-->
<!--          return;-->
<!--        }-->
<!--        this.disabled = true;-->
<!--        let loadingInstance = Loading.service({-->
<!--          text: "正在导出...",-->
<!--          background: "rgba(0,0,0,.5)"-->
<!--        });-->
<!--        let arr = this.dataListSelections.map(item => {-->
<!--          console.log(item)-->
<!--          return {-->
<!--            设备编号: item.equipmentid,-->
<!--            设备名称: item.equipmentname,-->
<!--            品牌: item.eqbrand,-->
<!--            设备类型: item.type,-->
<!--            用途: item.usedfor,-->
<!--            接口类型: item.interfacetype,-->
<!--            协议类型: item.protocol,-->
<!--            MAC地址: item.eqaddress-->
<!--          };-->
<!--        });-->
<!--        //console.log(arr)-->
<!--        let sheet = xlsx.utils.json_to_sheet(arr);-->
<!--        const book1 = xlsx.utils.book_new();-->
<!--        xlsx.utils.book_append_sheet(book1,sheet,"sheet1");-->
<!--        xlsx.writeFile(book1,`user${new Date().getTime()}.xls`);-->
<!--        loadingInstance.close();-->
<!--        this.disabled = false;-->
<!--      },-->
<!--      //  奇偶行背景色不同-->
<!--      setCurrent(row) {-->
<!--        this.$refs.singleTable.setCurrentRow(row);-->
<!--      },-->
<!--      handleCurrentChange(val) {-->
<!--        this.currentRow = val;-->
<!--      },-->
<!--      tableRowClassName({row, rowIndex}) {-->
<!--        if ((rowIndex + 1) % 2 === 0) {-->
<!--          return 'success-row';-->
<!--        }-->
<!--        return '';-->
<!--      },-->
<!--      // 获取数据列表-->
<!--      getDataList () {-->
<!--        this.dataListLoading = true-->
<!--        this.$http({-->
<!--          url: this.$http.adornUrl('/interset/interset/list'),-->
<!--          method: 'get',-->
<!--          params: this.$http.adornParams({-->
<!--            'page': this.pageIndex,-->
<!--            'limit': this.pageSize,-->
<!--            'key': this.dataForm.key-->
<!--          })-->
<!--        }).then(({data}) => {-->
<!--          if (data && data.code === 0) {-->
<!--            this.dataList = data.page.list-->
<!--            this.totalPage = data.page.totalCount-->
<!--          } else {-->
<!--            this.dataList = []-->
<!--            this.totalPage = 0-->
<!--          }-->
<!--          this.dataListLoading = false-->
<!--        })-->
<!--      },-->
<!--      // 每页数-->
<!--      sizeChangeHandle (val) {-->
<!--        this.pageSize = val-->
<!--        this.pageIndex = 1-->
<!--        this.getDataList()-->
<!--      },-->
<!--      // 当前页-->
<!--      currentChangeHandle (val) {-->
<!--        this.pageIndex = val-->
<!--        this.getDataList()-->
<!--      },-->
<!--      // 多选-->
<!--      selectionChangeHandle (val) {-->
<!--        this.dataListSelections = val-->
<!--      },-->
<!--      // 新增 / 修改-->
<!--      addOrUpdateHandle (id) {-->
<!--        this.addOrUpdateVisible = true-->
<!--        this.$nextTick(() => {-->
<!--          this.$refs.addOrUpdate.init(id)-->
<!--        })-->
<!--      },-->
<!--      // 删除-->
<!--      deleteHandle (id) {-->
<!--        var ids = id ? [id] : this.dataListSelections.map(item => {-->
<!--          return item.no-->
<!--        })-->
<!--        this.$confirm(`确定对[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {-->
<!--          confirmButtonText: '确定',-->
<!--          cancelButtonText: '取消',-->
<!--          type: 'warning'-->
<!--        }).then(() => {-->
<!--          this.$http({-->
<!--            url: this.$http.adornUrl('/interset/interset/delete'),-->
<!--            method: 'post',-->
<!--            data: this.$http.adornData(ids, false)-->
<!--          }).then(({data}) => {-->
<!--            if (data && data.code === 0) {-->
<!--              this.$message({-->
<!--                message: '操作成功',-->
<!--                type: 'success',-->
<!--                duration: 1500,-->
<!--                onClose: () => {-->
<!--                  this.getDataList()-->
<!--                }-->
<!--              })-->
<!--            } else {-->
<!--              this.$message.error(data.msg)-->
<!--            }-->
<!--          })-->
<!--        })-->
<!--      }-->
<!--    }-->
<!--  }-->
<!--</script>-->
<!--<style lang="scss">-->
<!--.tr-color-0 {-->
<!--  background: #f0f0f0;-->
<!--}-->
<!--.tr-color-1 {-->
<!--  background: #fff;-->
<!--}-->
<!--.el-table .success-row {-->
<!--  background: #DFEAF5;-->
<!--}-->
<!--</style>-->
